<template>

  <uni-nav-bar title="首页" @clickLeft="back"/>

  <liu-search-bar class="search" :mode="2" @confirm="confirm" @blur="blur" @input="input"></liu-search-bar>

  <uni-notice-bar :show-close="true" :show-icon="true" text="欢迎来到美食天下app" />

  <view id="qbsp" class="content">
    <view class="contentMain">
      <view class="swiperPictures">
        <!--轮播图-->
        <swiper class="home-swiper" indicator-dots="true" :autoplay="autoplay" :interval="interval"
                :circular="circular" :duration="duration">
          <block v-for="(item,key) in lunboData" :key="key">
            <swiper-item>
              <image :src="item.imgurl" class="slide-image"/>
            </swiper-item>
          </block>
        </swiper>
      </view>
      <view class="noticeBar">
        <van-notice-bar backgroundColor="#fff" speed="30"
                        left-icon="http://www.a-puppy-c.top/smartLearning/openai.jpg" :text="text"/>
      </view>
      <view class="tabBar">
        <van-grid :gutter="10" column-num="4">
          <van-grid-item v-for="(item,key) in icon" :key="key" :url="item.toUrl" :text="item.text"
                         :icon="item.photoSrc"/>
        </van-grid>
      </view>

<!--      <view class="arrondi">-->
<!--        <view class="xsms" @click="seckill" data-id="0">-->
<!--          <image-->
<!--              src="https://tse3-mm.cn.bing.net/th/id/OIP-C.jWs9WKV8ztmBTLIuZ3xhHAHaHS?w=199&h=195&c=7&r=0&o=5&dpr=1.3&pid=1.7	"></image>-->
<!--        </view>-->
<!--        <view class="arrondiRight">-->
<!--          <view class="xsmsRight" @click="giftPack" data-id="1">-->
<!--            <image src="https://pic.ntimg.cn/file/20210726/32993969_094555220100_2.jpg"></image>-->
<!--          </view>-->
<!--          <view class="xsmsRight" @click="giftPack" data-id="2">-->
<!--            <image src="https://jifen1.baifenhui.cn/article/22120505370646.jpg"></image>-->
<!--          </view>-->
<!--        </view>-->
<!--      </view>-->

      <view class="recommend">
        <text class="recommend-text">精品热菜</text>
      </view>
      <!-- 新品上市 -->

      <!-- 商品列表 -->
      <view class="goodsList">
        <van-grid :gutter="2" column-num="2" :border="false">
          <van-grid-item use-slot v-for="(goods,i) in goods" :key="i" :url="goods.toUrl">
            <view class="goods">
              <image style="width: 100%;border-radius: 40px" :src="goods.productAvatar"/>
              <view class="goodsNameText">
                <text class="goodsName gname">{{ goods.productName }}</text>
              </view>
              <view class="goodsPriceText">
                <text class="goodsCPrice">￥{{ goods.productPrice }}</text>
              </view>
              <view class="goodsIntroductionText">
                <text class="goodsIntroduction">
                  <text class="introduction">{{ goods.productDetail }}</text>
                </text>
              </view>
            </view>
          </van-grid-item>
        </van-grid>
      </view>
      <view class="recommend">
        <text class="recommend-text">推荐主食</text>
      </view>
      <view class="goodsList">
        <van-grid :gutter="2" column-num="2" :border="false">
          <van-grid-item use-slot v-for="(goods,i) in goods2" :key="i" :url="goods.toUrl">
            <view class="goods">
              <image style="width: 100%;border-radius: 40px" :src="goods.productAvatar"/>
              <view class="goodsNameText">
                <text class="goodsName gname">{{ goods.productName }}</text>
              </view>
              <view class="goodsPriceText">
                <text class="goodsCPrice">￥{{ goods.productPrice }}</text>
              </view>
              <view class="goodsIntroductionText">
                <text class="goodsIntroduction">
                  <text class="introduction">{{ goods.productDetail }}</text>
                </text>
              </view>
            </view>
          </van-grid-item>
        </van-grid>
      </view>
    </view>
  </view>
  <view style="height: 90px;width: 100%"></view>
  <Footer></Footer>

</template>
<script>
import Footer from '@/component/footer/footer.vue'


export default {
  options: {
    styleIsolation: 'shared', // 解除样式隔离
  },
  components: {
    Footer
  },
  data() {

    return {
      // 下拉菜单栏
      dropdownMenus: [{
        text: '全部商品',
        value: 0
      },
        {
          text: '人气商品',
          value: 1
        },
        {
          text: '新品上市',
          value: 2
        },
      ],
      //通告文字
      text: '新上架小零食全部九折销售，更有满99减价优惠，数量有限，先到先得！',
      dropdownValue: 0,
      searchValue: '',
      //轮播图配置
      lunboData: [],
      autoplay: true, //是否自动切换
      interval: 3000, //自动切换时长
      duration: 1200, //滑动动画时长
      circular: true, //是否自动采用衔接滑动
      //中部导航图
      icon: [],
      //商品实例图
      goods: [],
      goods2: [],
    }
  },
  onLoad() {
    //轮播图
    this.swiperPictures();
    //中部导航栏tabBar
    this.tabBarIcon();
    //商品示例
  },
  created() {
    this.goodsData();
    this.goodsData2();
  },
  methods: {
    /* 下拉跳转 */
    toGoodsList(e) {
      let dropdownValue = '';
      for (var i = 0; i < this.dropdownMenus.length; i++) {
        if (this.dropdownMenus[i].value == e.detail) {
          dropdownValue = this.dropdownMenus[i].text;
        }
      }
      console.log(dropdownValue)
    },
    /* 搜索onChange */
    onChange(e) {
      let searchData = '';
      searchData = e.detail;
      console.log(searchData)
    },
    /* 取消onSearch */
    searchCancel() {
      console.log("取消搜索")
    },
    /* 轮播图 */
    swiperPictures() {
      var data = {
        "datas": [{
          "id": 1,
          "imgurl": "https://img.zcool.cn/community/01db615dbc44eba801209e1f590d7c.jpg@2o.jpg"
        },
          {
            "id": 2,
            "imgurl": "https://img.zcool.cn/community/01805d5ec76b7ba801209b86cb4864.jpg@1280w_1l_2o_100sh.jpg"
          },
          {
            "id": 3,
            "imgurl": "https://img.zcool.cn/community/016dfe57483dc06ac72525ae663164.JPG@1280w_1l_2o_100sh.jpg"
          },
        ]
      };
      this.lunboData = data.datas
    },
    /* 中部导航栏 */
    tabBarIcon() {
      var data = {
        "icons": [{
          "photoSrc": "http://www.a-puppy-c.top/smartLearning/openai.jpg",
          "text": "新品",
          "toUrl": "/pagesGoods/goods/index"
        },
          {
            "photoSrc": "http://www.a-puppy-c.top/smartLearning/openai.jpg",
            "text": "收藏",
            "toUrl": "/pagesGoods/goods/index"
          },
          {
            "photoSrc": "http://www.a-puppy-c.top/smartLearning/openai.jpg",
            "text": "精品",
            "toUrl": "/pagesGoods/goods/index"
          },
          {
            "photoSrc": "http://www.a-puppy-c.top/smartLearning/openai.jpg",
            "text": "推荐",
            "toUrl": "/pagesGoods/goods/index"
          }
        ]
      };
      this.icon = data.icons
    },
    /* 展示商品列表 */
    goodsData() {
      //从后端获取数据
      uni.request({
        url: "http://localhost:9999/nbb/Product/getAllProduct",
        header: {
          'Authorization': uni.getStorageSync('Authorization'),
          'content-type': 'application/x-www-form-urlencoded'
        },
        method: 'GET',
        data: {
          sort: "热菜"
        },
        success: (res) => {
          if (res.data.code == 200) {
            this.goods = res.data.data
          } else {
            console.log("获取分类失败");
            console.log(res.data);
          }
        },
        fail() {
          console.log("获取分类失败");
        }
      })
    },
    goodsData2() {
      //从后端获取数据
      uni.request({
        url: "http://localhost:9999/nbb/Product/getAllProduct",
        header: {
          'Authorization': uni.getStorageSync('Authorization'),
          'content-type': 'application/x-www-form-urlencoded'
        },
        method: 'GET',
        data: {
          sort: "主食"
        },
        success: (res) => {
          if (res.data.code == 200) {
            this.goods2 = res.data.data
          } else {
            console.log("获取分类失败");
            console.log(res.data);
          }
        },
        fail() {
          console.log("获取分类失败");
        }
      })
    },
    /* 限时秒杀跳转事件 */
    seckill(e) {
      uni.navigateTo({
        url: '/pagesGoods/goods/index',
      })
    },
    /* 优惠券专区和套餐礼包跳转事件 */
    giftPack(e) {
      uni.navigateTo({
        url: '/pagesGoods/goods/index',
      })
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .uni-nav-bar-text {
  font-size: 20px;
}

::v-deep .uni-navbar__content_view {
  font-size: 20px;
}

.content {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.header {
  margin-top: 200px;
  width: 100%;
  height: 20%;
}

.header .dropdown {
  width: 25%;
  height: 100%;
  float: left;
}

.header .search {
  width: 100%;
  height: 100%;
}

/*轮播控件*/
.home-swiper {
  width: 100%;
  margin: auto;
  height: 400rpx;
}

.slide-image {
  width: 100%;
  height: 100%;
}

.arrondi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 20rpx;
}

.xsms image {
  width: 340rpx;
  height: 280rpx;
}

.xsmsRight image {
  width: 360rpx;
  height: 135rpx;
}

.title {
  width: 750rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title image {
  height: 64rpx;
  width: 232rpx;
  padding: 55rpx 0 30rpx 0;
}

.van-grid-item__content {
  padding: 6px 6px !important;
}

.goods {
  box-sizing: border-box;
  overflow: hidden;
  break-inside: avoid;
  border: 1px solid #efefef;
  border-radius: 15rpx;
  width: 95%;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0 auto;

}

.goodsNameText {
  width: 100%;
  height: 60%;
}

.goodsName {
  font-size: 30rpx;
  line-height: 40rpx;
  padding: 15rpx 15rpx 5rpx 15rpx;
  color: #555;
}

.gname {
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 18px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.goodsPriceText {
  padding: 0 15rpx;
  margin-bottom: 10px;
  margin-top: 5px;


  ::v-deep.goodsCPrice {
    font-size: 28rpx;
    color: firebrick;
    font-weight: bold;
    margin-right: 5rpx;
  }
}


.goodsOPrice {
  font-size: 30rpx;
  color: #aaa;
  text-decoration: line-through;
  padding-bottom: 10rpx
}

.goodsIntroductionText {
  padding: 10rpx 15rpx;
  border-top: 1px solid #efefef;
}

.goodsIntroduction {
  font-size: 22rpx;
  line-height: 35rpx;
  color: #999;
  //height: 5rpx;
}

.introduction {
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  font-size: 15px;
  -webkit-line-clamp: 2;
  margin-top: 5px;
  //margin-bottom: 5px;
}

.search {
  margin-top: 15px;
  margin-bottom: 15px;

  ::v-deep .search-name {
    font-size: 20px;
  }
}

.recommend {
  text-align: center;
  line-height: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  background: #EDEFF6;


  .recommend-text {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 19px;
    line-height: 30px;
  }
}


</style>